<%@page import="com.qububu.emporium.orderform.dto.OrderFormInfoDto"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
List<OrderFormInfoDto> orderList = (List<OrderFormInfoDto>) request.getAttribute("orderList");
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/jquery/jquery-1.8.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/honeycombtool.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/ajax_constants.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resource/js/constants.js"></script>
<script type="text/javascript">
function doChangeOrderFormStatus(oi, status, node) {
	if (!CHECK.isEmpty(oi) && !CHECK.isEmpty(status) && !CHECK.isEmpty(node)) {
		node = $(node);
		var controlNode = node.parent("span").parent(".control");
		var controlHtmlStr = controlNode.html();
		controlNode.html("");
		$.ajax({
			url: WEBROOT + "/orderForm/admin/changeOrderStatus",
			type: "post",
			dataType: "json",
			data: {
				"oi" : oi,
				"status": status
			},
			success: function(res) {
				if (res.result == AjaxMsgConstants.SUCCESS) {
					controlNode.html("<span style=\"color:orange\">"+node.html()+"</span>");
				} else {
					alert("操作失败, 请稍后重试");
					controlNode.html(controlHtmlStr);
				}
			}
		});
	}
}

function more(on, eventNode) {
	if (!CHECK.isEmpty(on)) {
		var orderGoodsNode = $("#"+on);
		if (orderGoodsNode.find("div").length == 0) {
			$.ajax({
				url: WEBROOT + "/orderForm/admin/getOrderGoods",
				type: "post",
				dataType: "json",
				data: {
					"on" : on
				},
				success: function(res) {
					if (res.result == AjaxMsgConstants.SUCCESS) {
						createOrderGoodsToPage(res.goodsList, orderGoodsNode);
						$(eventNode).html("收起详情");
					} else {
						alert("系统繁忙, 请稍后重试");
					}
				}
			});	
		} else {
			if (orderGoodsNode.css("display") == "none") {
				orderGoodsNode.css("display", "block");
				$(eventNode).html("收起详情");
			} else {
				orderGoodsNode.css("display", "none");
				$(eventNode).html("订单详情");
			}
		}
	}
}

function createOrderGoodsToPage(goodsList, orderGoodsNode) {
	orderGoodsNode.css("display", "block");
	orderGoodsNode.append('<div style="margin-left: 50px;">商品名</div><div>商品单价</div><div>商品数量(人/份)</div><div>该商品适用人数</div><div style="width: 1px; height: 1px; clear: both;"></div>');
	var htmlStr = '';
	for (var i = 0; i < goodsList.length; i++) {
		var goods = goodsList[i];
		htmlStr =   '<div style="margin-left: 50px;">'+goods.goodsName+'</div>' +
					'<div>'+goods.goodsPrice+'</div>' +
					'<div>'+goods.goodsQuantity+'</div>' +
					'<div>'+goods.goodsUseNum+'</div>'+
					'<div style="width: 1px; height: 1px; clear: both;"></div>';
		orderGoodsNode.append(htmlStr);
	}
}
</script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", Arial;
font-size: 12px;
color: #333333;
}
.content {
width: 100%;
height: 100%;
background-color: #ccc;
}
.menu {
width: 100%; 
height: 40px;
margin: 5px; 
border-top: 1px solid green; 
line-height: 30px; 
}

.menu div {
float: left; height: 40px;
}
.menu .order_no {
width: 150px;
text-align: center;
}
.menu .total {
width: 60px;
text-align: center;
}
.menu .time {
width: 160px;
text-align: center;
}
.menu .order_receive_time {
width: 100px;
text-align: center;
}
.menu .buyer_name {
width: 100px;
}
.menu .buyer_tel {
width: 100px;
}
.menu .buyer_addr {
width: 100px;
}
.menu .remark {
width: 160px;
line-height: 12px;
}
.menu .control {
width: 120px;
text-align: center;
}
.menu .no {
margin-left: 5px;
width: 20px;
height: 40px;
line-height: 30px;
color: red;
font-weight: bold;
}
.menu .more {
width: 80px;
height: 40px;
}
.order_content {
width: 100%;
height: auto;
border-bottom:1px solid green;

}
.order_goods {
display: none;
width: 100%;
min-height: 60px;
height: auto!important;
height: 60px;
border-top:1px dashed green;
}

.order_goods div {
float: left;
text-align: center;
height: 30px;
line-height: 30px;
width: 100px;
}
</style>
<title>订单管理</title>
</head>
<body>
<div class="content">
	<div class="header" style="width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 18px;">
		等待处理的订单
	</div>
	<div class="menu">
		<div class="order_no">订单号</div>
		<div class="total">总价(元)</div>
		<div class="time">下单时间</div>
		<div class="order_receive_time">收货时间</div>
		<div class="buyer_name">购买者姓名</div>
		<div class="buyer_tel">购买者号码</div>
		<div class="buyer_addr">购买者地址</div>
		<div class="remark" style="line-height: 30px; text-align: center;">备注</div>
		<div class="control">操作</div>
		<div style="width: 1px; height: 1px; clear: both;"></div>
	</div>
	<div class="order_content">
		<%
		if (orderList.size() == 0) {
		%>
		<div class="menu" style="text-align: center; font-size: 14px;">暂时没有需要处理的订单</div>
		<%	
		} else {
			for (int i = 0; i < orderList.size(); i++) {
				OrderFormInfoDto orderForm = orderList.get(i);
		%>
		<div class="menu">
			<div class="no"><%=(i + 1) %></div>
			<div class="order_no"><%=orderForm.getOrderNo() %></div>
			<div class="total"><%=orderForm.getOrderAmount() %></div>
			<div class="time"><%=orderForm.showOrderCreateTimeToDttm() %></div>
			<div class="order_receive_time"><%=orderForm.showOrderReceiveTimeToDt() %></div>
			<div class="buyer_name"><%=orderForm.getUserName() %></div>
			<div class="buyer_tel"><%=orderForm.getUserPhoneNumber() %></div>
			<div class="buyer_addr"><%=orderForm.getUserAddr() %></div>
			<div class="remark" style="line-height: 12px;"><%=orderForm.getRemark() %></div>
			<div class="control">
				<span>
					<a href="javascript:void(0)" onclick="doChangeOrderFormStatus('<%=orderForm.getOrderId() %>', 'processed', this)">货已送到</a>
				</span>
				<span>
					<a href="javascript:void(0)" onclick="doChangeOrderFormStatus('<%=orderForm.getOrderId() %>', 'lossed', this)">作废</a>
				</span>
			</div>
			<div class="more"><a href="javascript:void(0)" onclick="more('<%=orderForm.getOrderNo() %>', this)">订单详情</a></div>
			<div style="width: 1px; height: 1px; clear: both;"></div>
			<div class="order_goods" id="<%=orderForm.getOrderNo() %>"></div>
			<div style="width: 1px; height: 1px; clear: both;"></div>
		</div>
		<div style="width: 1px; height: 1px; clear: both;"></div>
		<%		
			}
		}
		%>
	</div>
</div>
</body>
</html>